<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- 		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-icon" @click="goBack">
					<image src="/static/back.png" mode="aspectFit"></image>
				</view>
				<text class="title">店铺详情</text>
			</view>
		</view> -->

		<!-- 店铺信息 -->
		<view class="shop-info">
			<view class="shop-header">
				<image class="shop-img" src="/static/shop.jpg" mode="aspectFill"></image>
				<view class="shop-overlay">
					<view class="shop-badge">
						<view class="badge-icon">🏆</view>
						<text>优质服务</text>
					</view>
				</view>
			</view>
			<view class="shop-detail">
				<view class="shop-title">
					<view class="title-icon">🏪</view>
					<text>大美汽车保养厂（解放路店）</text>
				</view>
				<view class="shop-rating">
					<uni-rate :value="4" size="16" color="#ddd" activeColor="#ffd700" readonly></uni-rate>
					<text class="score">4.0分</text>
					<view class="divider"></view>
					<text class="sale">销量：556</text>
				</view>
				<view class="shop-info-item">
					<view class="info-icon">🕒</view>
					<text>营业时间：周一至周五 早上8:00-晚上22:00</text>
				</view>
				<view class="shop-info-item">
					<view class="info-icon">📍</view>
					<text>位置：山阳区人民路与解放路交叉口</text>
				</view>
			</view>
		</view>

		<!-- 服务项目 -->
		<view class="section">
			<view class="section-title">
				<view class="title-icon">🔧</view>
				<text>服务项目</text>
			</view>
			<view class="service-list">
				<view class="service-item">
					<view class="service-info">
						<view class="service-name">工时价格（每小时）</view>
						<view class="service-price">
							<text class="current-price">¥35.9</text>
							<text class="original-price">¥60</text>
						</view>
					</view>
					<!-- <view class="service-action">
						<button class="add-btn">+</button>
					</view> -->
				</view>
				<view class="service-item">
					<view class="service-info">
						<view class="service-name">轮胎更换</view>
						<view class="service-price">
							<text class="current-price">¥35.9</text>
							<text class="original-price">¥60</text>
						</view>
					</view>
					<!-- <view class="service-action">
						<button class="add-btn">+</button>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 服务评价 -->
		<view class="section">
			<view class="section-title">
				<view class="title-icon">⭐</view>
				<text>服务评价</text>
				<view class="more-btn">
					<text>更多</text>
					<view class="arrow">→</view>
				</view>
			</view>
			<view class="comment-list">
				<view v-for="(item,index) in comments" :key="index" class="comment">
					<view class="comment-avatar">
						<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					</view>
					<view class="comment-body">
						<view class="comment-header">
							<text class="name">{{ item.name }}</text>
							<view class="comment-rating">
								<uni-rate :value="item.rate" size="12" color="#ddd" activeColor="#ffd700"
									readonly></uni-rate>
							</view>
						</view>
						<text class="date">{{ item.date }}</text>
						<text class="content">{{ item.content }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<button class="appointment-btn" @click="makeAppointment">
				<view class="btn-content">
					<view class="btn-icon">📅</view>
					<text>立即预约</text>
				</view>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				comments: [{
						avatar: '/static/avatar.jpg',
						name: '黄**',
						date: '2022-12-31',
						rate: 5,
						content: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！'
					},
					{
						avatar: '/static/avatar.jpg',
						name: '黄**',
						date: '2022-12-31',
						rate: 5,
						content: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！'
					}
				]
			}
		},
		onLoad() {
			// 获取系统信息，计算状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			makeAppointment() {
				uni.navigateTo({
					url: '/pages/car-repair-model/appointment/appointment' // 可携带参数
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		background: linear-gradient(180deg, #f7f9fc 0%, #f0f4ff 100%);
		min-height: 100vh;
	}

	/* 自定义导航栏 */
	.custom-nav {
		background: linear-gradient(90deg, #2a8cff 0%, #5aa9ff 100%);
		color: #fff;
		box-sizing: border-box;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	}

	.nav-content {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 20rpx;
		gap: 16rpx;
	}

	.back-icon {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
		transition: transform 0.15s ease, background 0.2s ease;
	}

	.back-icon:active {
		transform: scale(0.96);
		background: rgba(255, 255, 255, 0.28);
	}

	.back-icon image {
		width: 40rpx;
		height: 40rpx;
		filter: drop-shadow(0 2rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: 700;
		letter-spacing: 1rpx;
		color: #fff;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
	}

	.shop-info {
		background: #ffffff;
		margin: 24rpx 20rpx 12rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
	}

	.shop-header {
		position: relative;
	}

	.shop-img {
		width: 100%;
		height: 300rpx;
	}

	.shop-overlay {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.shop-badge {
		background: rgba(255, 255, 255, 0.95);
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.badge-icon {
		font-size: 20rpx;
	}

	.shop-badge text {
		font-size: 24rpx;
		color: #ff6600;
		font-weight: 600;
	}

	.shop-detail {
		padding: 32rpx;
	}

	.shop-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
	}

	.shop-title text {
		font-size: 32rpx;
		font-weight: 700;
		color: #1f2d3d;
	}

	.shop-rating {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		gap: 12rpx;
	}

	.score {
		font-size: 26rpx;
		color: #ff6600;
		font-weight: 600;
	}

	.divider {
		width: 1rpx;
		height: 20rpx;
		background: #e8ecf0;
	}

	.sale {
		font-size: 26rpx;
		color: #6b7a90;
	}

	.shop-info-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.info-icon {
		font-size: 24rpx;
		margin-right: 12rpx;
		color: #6b7a90;
	}

	.shop-info-item text {
		font-size: 26rpx;
		color: #6b7a90;
		line-height: 1.5;
	}

	.section {
		background: #ffffff;
		margin: 12rpx 20rpx;
		padding: 32rpx;
		border-radius: 24rpx;
		box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
	}

	.section-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.section-title .title-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
	}

	.section-title text {
		font-size: 32rpx;
		font-weight: 700;
		color: #1f2d3d;
	}

	.more-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		color: #2a8cff;
		font-size: 26rpx;
	}

	.arrow {
		font-size: 20rpx;
		transition: transform 0.3s ease;
	}

	.more-btn:active .arrow {
		transform: translateX(4rpx);
	}

	/* 服务项目样式 */
	.service-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.service-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		background: #f8f9fa;
		border-radius: 16rpx;
		border: 1rpx solid #e8ecf0;
	}

	.service-info {
		flex: 1;
	}

	.service-name {
		font-size: 28rpx;
		color: #1f2d3d;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.service-price {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.current-price {
		font-size: 28rpx;
		color: #ff6600;
		font-weight: 700;
	}

	.original-price {
		font-size: 24rpx;
		color: #9ca3af;
		text-decoration: line-through;
	}

	.add-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #2a8cff;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(42, 140, 255, 0.3);
		transition: all 0.3s ease;
	}

	.add-btn:active {
		transform: scale(0.95);
		background: #1c6bff;
	}

	/* 评价样式 */
	.comment-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.comment {
		display: flex;
		gap: 20rpx;
	}

	.comment-avatar {
		flex-shrink: 0;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.08);
	}

	.comment-body {
		flex: 1;
	}

	.comment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.name {
		font-size: 28rpx;
		font-weight: 600;
		color: #1f2d3d;
	}

	.comment-rating {
		display: flex;
		align-items: center;
	}

	.date {
		font-size: 24rpx;
		color: #9ca3af;
		margin-bottom: 12rpx;
	}

	.content {
		font-size: 26rpx;
		color: #6b7a90;
		line-height: 1.5;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 24rpx 20rpx;
		background: #ffffff;
		box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.08);
		border-top: 1rpx solid rgba(0, 0, 0, 0.04);
	}

	.appointment-btn {
		width: 100%;
		background: linear-gradient(90deg, #2a8cff 0%, #1c6bff 100%);
		color: #ffffff;
		border-radius: 38rpx;
		border: none;
		box-shadow: 0 12rpx 24rpx rgba(42, 140, 255, 0.32);
		transition: all 0.3s ease;
		overflow: hidden;
	}

	.appointment-btn:active {
		transform: translateY(2rpx) scale(0.98);
		box-shadow: 0 8rpx 16rpx rgba(42, 140, 255, 0.28);
	}

	.btn-content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		padding: 28rpx 0;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 1rpx;
	}

	.btn-icon {
		font-size: 28rpx;
		transition: transform 0.3s ease;
	}

	.appointment-btn:active .btn-icon {
		transform: scale(1.1);
	}
</style>